<template>
  <div class="refueling_payment">
    <c-title :hide="false" text="闪付"></c-title>
    <div class="addressCell" @click="toStoreList">
      <div class="addressCell_l flex">
        <i class="iconfont icon-dizhi1"></i>
        <div class="txt" v-if="storeList && storeList.store_name">{{ storeList.store_name }}</div>
      </div>
      <div class="addressCell_r flex">
        <i class="iconfont icon-icon_more11"></i>
      </div>
    </div>
    <div class="storeListBox" v-if="storeList">
      <div class="storeListBox_l">
        <div class="title">{{ storeList.store_name }}</div>
        <div class="address">{{ storeList.full_address }}</div>
        <div class="detailBox">
          <div class="detail" v-if="storeList.text_info">{{ storeList.text_info.detail_text1 }}</div>
          <div class="detail" v-if="storeList.text_info">{{ storeList.text_info.detail_text2 }}</div>
        </div>
        <div class="tagBox" v-if="storeList.text_info && storeList.text_info.label_arr.length > 0">
          <div class="tag" v-for="(item, index) in storeList.text_info.label_arr" :key="index">{{ item }}</div>
        </div>
      </div>
      <div class="storeListBox_r" @click="goToAdress">
        <div class="iconfontBox">
          <i class="iconfont icon-zx_map_local"></i>
        </div>
        <div class="address_txt">{{ disCheck }}{{ storeList.unit }}</div>
      </div>
    </div>
    <div
      class="couponBox"
      v-if="
        storeList &&
          storeList.text_info &&
          (storeList.text_info.coupon_price_text1 ||
            storeList.text_info.coupon_price ||
            storeList.text_info.coupon_price_text2 ||
            storeList.text_info.member_price ||
            storeList.text_info.member_price_text1 ||
            storeList.text_info.member_price_text2)
      "
    >
      <div class="couponLis" v-if="storeList.text_info.coupon_price_text1 || storeList.text_info.coupon_price || storeList.text_info.coupon_price_text2">
        <div class="price" v-if="storeList.text_info.coupon_price_text1 || storeList.text_info.coupon_price">
          {{ storeList.text_info.coupon_price ? "￥" + storeList.text_info.coupon_price : "" }}{{ storeList.text_info.coupon_price_text1 }}
        </div>
        <div class="desc" :class="{ desc_md: storeList.text_info.coupon_price_text2.length >= 13 }" v-if="storeList.text_info.coupon_price_text2">
          {{ storeList.text_info.coupon_price_text2 }}
          <i class="iconfont icon-icon_down1" v-if="storeList.text_info.coupon_price_text2.length >= 13" @click="showPopup(storeList.text_info.coupon_price_text2)"></i>
        </div>
      </div>
      <div class="couponLis" v-if="storeList.text_info.member_price || storeList.text_info.member_price_text1 || storeList.text_info.member_price_text2">
        <div class="price" v-if="storeList.text_info.member_price || storeList.text_info.member_price_text1">
          {{ storeList.text_info.member_price ? "￥" + storeList.text_info.member_price : "" }}{{ storeList.text_info.member_price_text1 }}
        </div>
        <div class="desc" v-if="storeList.text_info.member_price_text2" :class="{ desc_md: storeList.text_info.member_price_text2.length >= 13 }">
          {{ storeList.text_info.member_price_text2 }}
          <i class="iconfont icon-icon_down1" v-if="storeList.text_info.member_price_text2.length >= 13"></i>
        </div>
      </div>
    </div>
    <template>
      <!-- @click="show = true" -->
      <div class="oil_station flex flex-a-c" v-if="oil_list">
        <div class="oil_station_l" style="flex-shrink: 0;">油品</div>
        <div class="oil_station_r flex" style="flex: 1;flex-wrap: wrap;">
          <div class="oilTag" :class="{ active: item.code == oil_list_select }" :style="tagColor(item)" @click="tapSelectCodeIndex_radio(item)" v-for="item in oil_list" :key="item.id">
            {{ item.name }}
          </div>
        </div>
      </div>
      <template v-if="gun_list && oil_list_select && orderList.length > 0">
        <div class="oil_station flex flex-a-c">
          <div class="oil_station_l" style="flex-shrink: 0;">油枪</div>
          <div class="oil_station_r flex" style="flex: 1;flex-wrap: wrap;">
            <div class="oilTag" :class="{ active_gun: item == gun_list_select }" @click="tapSelectgunIndex(item)" v-for="item in gun_list" :key="item.id">{{ item }}</div>
          </div>
        </div>
      </template>
      <template v-if="orderList.length > 0">
        <div class="payList" v-for="(items, index) in orderList" :key="index">
          <div class="cellGroup" v-if="items.plate_num">
            <div class="cellGroup_l">车牌号：{{ items.plate_num }}</div>
          </div>
          <div class="cellGroup" v-if="items.litre">
            <div class="cellGroup_l">升数：{{ items.litre }}L</div>
          </div>
          <div class="cellGroup" v-if="items.oil_name">
            <div class="cellGroup_l">油品：{{ items.oil_name }}</div>
          </div>
          <div class="cellGroup" v-if="items.oil_gun">
            <div class="cellGroup_l">油枪：{{ items.oil_gun }}</div>
          </div>
          <div class="cellGroup" v-if="items.amount">
            <div class="cellGroup_l">订单金额：￥{{ items.amount }}</div>
          </div>
          <div class="btnBox">
            <div class="btn" @click="toPayM(items)" v-if="items.not_pay == 0">去支付</div>
            <div class="btn" v-if="items.not_pay == 1">支付中</div>
          </div>
        </div>
      </template>
    </template>
    <!-- <van-popup v-model="show" round position="bottom" :style="{ height: '50%' }" :close-on-click-overlay="false">
      <van-nav-bar title="请选择油品">
        <template #left>
          <span style="color:#999999;" @click="confirmTap_close">取消</span>
        </template>
        <template #right>
          <span @click="confirmTap">确定</span>
        </template>
      </van-nav-bar>
      <div class="oil_station_list">
        <van-radio-group v-model="oil_list_select.code">
          <van-cell-group>
            <van-cell title-style="text-align: left;" :title="item.name" clickable @click="tapSelectCodeIndex_radio(item, index)" v-for="(item, index) in oil_list" :key="index">
              <template #right-icon>
                <van-radio :name="item.code" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
    </van-popup>
    <van-popup v-model="showGun" round position="bottom" :style="{ height: '50%' }" :close-on-click-overlay="false">
      <van-nav-bar title="请选择油枪">
        <template #left>
          <span style="color:#999999;" @click="confirmTap">取消</span>
        </template>
        <template #right>
          <span @click="confirmTap">确定</span>
        </template>
      </van-nav-bar>
      <div class="oil_station_list" v-if="gun_list.length">
        <van-radio-group v-model="gun_list_select">
          <div class="lis" v-for="(item, index) in gun_list" @click.stop="tapSelectgunIndex(item, index)" :key="index">
            <div class="lis_l">{{ item }}</div>
            <van-radio :name="item" @click="tapSelectgunIndex(item, index)"></van-radio>
          </div>
        </van-radio-group>
      </div>
    </van-popup> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      storeId: "",
      stroeList: [],
      point: null,
      city: null,
      storeNameKey: "",
      full_address: "",
      page: 1,
      total_page: 0,
      orderList: [],
      codeIndex: null,
      gunIndex: null,
      show: false,
      showGun: false,
      oil_list: [],
      gun_list: [],
      gun_list_select: "",
      oil_list_select: ""
    };
  },
  activated() {
    this.init();
    this.getData();
  },
  computed: {
    disCheck() {
      return this.storeList.distance.toFixed(2);
    },
    tagColor(item) {
      return function(item) {
        if (item.color) {
          return {
            background: item.color,
            border: "1px solid " + item.color,
            color: "#fff"
          };
        }
      };
    }
  },
  methods: {
    init() {
      this.codeIndex = null;
      this.gunIndex = null;
      this.show = false;
      this.showGun = false;
    },
    showPopup(key) {
      this.$dialog.confirm({
        title: "",
        message: key,
        showCancelButton: false
      });
    },
    goToAdress() {
      let point = this.fun.bd_decrypt(this.point.lng, this.point.lat);
      this.fun.goToWXAdress(point, this.storeList.store_name, this.storeList.full_address);
    },
    // 油品点击
    tapSelectCodeIndex_radio(item, index) {
      this.orderList = [];
      if (item.code == this.oil_list_select) {
        this.oil_list_select = "";
        this.confirmTap();
        return;
      }
      this.oil_list_select = item.code;
      this.confirmTap();
    },
    // 油枪点击
    tapSelectgunIndex(item, index) {
      this.orderList = [];
      if (item == this.gun_list_select) {
        this.gun_list_select = "";
        this.confirmTap();
        return;
      }
      this.gun_list_select = item;
      this.confirmTap();
    },
    async confirmTap() {
      let json = {
        sid: this.storeId,
        oil_code: this.oil_list_select,
        gun: this.gun_list_select
      };
      let { data, msg, result } = await $http.post("plugin.store-oil-station.frontend.unpaid-order.search-wait-pay", json, "");
      if (result) {
        this.showGun = false;
        this.show = false;
        this.orderList = data;
      } else {
        this.$toast(msg);
        this.showGun = false;
        this.show = false;
      }
    },
    toPayM(items) {
      this.$router.push(
        this.fun.getUrl(
          "goodsorder",
          {},
          {
            goodsId: items.goodsId,
            optionsId: 0,
            total: 1,
            tag: "oil_order",
            plate_num: items.plate_num,
            litre: items.litre,
            oil_gun: items.oil_gun,
            sn: items.third_order_no,
            source: items.order_source,
            amt: items.amount
          }
        )
      );
    },
    // getNextData(e) {
    //   this.getStoreList(e, true);
    // },
    toStoreList() {
      this.$router.push(this.fun.getUrl("refueling_list", { store_id: this.storeId }));
    },
    // showClose() {
    //   this.page = 1;
    //   this.total_page = 0;
    //   this.stroeList = [];
    //   this.show = false;
    // },
    // tapStoreID(item) {
    //   this.storeId = item.id;
    //   this.showClose();
    //   this.getStore();
    // },
    async getData() {
      let res = await this.fun.getLocation();
      this.point = res.point;
      this.city = res.city;
      this.full_address = res.address;
      let json = {
        lng: this.point.lng,
        lat: this.point.lat,
        city: this.city,
        name: this.storeNameKey
      };
      let { data, msg, result } = await $http.post("plugin.store-oil-station.frontend.unpaid-order.store", json, "");
      if (result) {
        let store = data.data;
        if (this.$route.params.store_id) {
          store.forEach(element => {
            if (element.id == this.$route.params.store_id) {
              this.storeId = element.id;
              this.storeList = element;
            }
          });
        } else {
          if (store.length > 0) {
            store.forEach(element => {
              if (element.is_default) {
                this.storeId = element.id;
                this.storeList = element;
              }
            });
            if (!this.storeId) {
              this.storeId = data.data[0].id;
            }
            this.storeList = store[0];
          }
        }
        console.log(this.storeList, "storeList");
        this.getStore();
      } else {
        this.$toast(msg);
      }
    },
    async getStore() {
      let { data, msg, result } = await $http.post("plugin.store-oil-station.frontend.unpaid-order.wait-pay", { sid: this.storeId }, "");
      if (result) {
        this.orderList = data.order_list;
        this.gun_list = data.gun_list;
        this.oil_list = data.oil_list;
        console.log(this.gun_list, this.oil_list, "dddddddd");
      } else {
        this.orderList = [];
        this.gun_list = [];
        this.oil_list = [];
        this.$toast(msg);
      }
    }
    // async getStoreList($event, key = false) {
    //   let json = {
    //     lng: this.point.lng,
    //     lat: this.point.lat,
    //     city: this.city,
    //     name: this.storeNameKey
    //   };
    //   if (key) {
    //     this.page = this.page + 1;
    //     json.page = this.page;
    //   }
    //   let { data, msg, result } = await $http.post("plugin.store-oil-station.frontend.unpaid-order.store", json, "");
    //   if (result) {
    //     console.log(data);
    //     if (key) {
    //       this.stroeList = this.stroeList.concat(data.data);
    //       return;
    //     }
    //     this.page = 1;
    //     this.total_page = data.last_page;
    //     if (!this.total_page) this.total_page = 1;
    //     this.stroeList = data.data;
    //     this.show = true;
    //   } else {
    //     if (key) {
    //       this.page = this.page - 1;
    //       return;
    //     }
    //     this.$toast(msg);
    //   }
    // }
  }
};
</script>
<style lang="scss" scoped>
.refueling_payment {
  padding-bottom: 2rem;
}
.couponBox {
  padding: 0.63rem;
  margin: 0.63rem 0.75rem;
  background: #ffffff;
  border-radius: 0.5rem;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  overflow: hidden;
  .couponLis {
    overflow: hidden;
    flex: 1;
    width: 50%;
    flex-shrink: 0;
    height: 3.75rem;
    background: #fff5f5;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 0.5rem;
    box-sizing: border-box;
    .price {
      width: 100%;
      font-weight: 500;
      font-size: 0.75rem;
      color: #f15353;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 0.5rem;
      box-sizing: border-box;
    }
    .desc {
      padding: 0 0.5rem;
      box-sizing: border-box;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 0.75rem;
      color: #6e6e79;
      position: relative;
      .icon-icon_down1 {
        position: absolute;
        right: 0.8rem;
        top: 0;
        font-size: 0.75rem;
        color: #999999;
      }
    }
    .desc_md {
      padding-left: 0.5rem;
      padding-right: 1.19rem;
    }
  }
  .couponLis:last-child {
    margin-right: 0;
  }
}
.storeListBox {
  padding: 0.88rem 0.63rem;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 0.75rem;
  .storeListBox_l {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .title {
      font-weight: bold;
      font-size: 1rem;
      color: #00001c;
    }
    .address {
      font-size: 0.81rem;
      color: #00001c;
      margin-top: 0.84rem;
      text-align: left;
    }
    .detailBox {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      margin-top: 0.84rem;
      .detail {
        font-size: 0.75rem;
        color: #00001c;
        margin-right: 0.66rem;
      }
      .detail:last-child {
        margin-right: 0;
      }
    }
    .tagBox {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 0.84rem;
      .tag {
        font-size: 0.63rem;
        color: #3b3b4a;
        line-height: 0.75rem;
        padding: 0.16rem 0.31rem;
        box-sizing: border-box;
        border-radius: 0.25rem;
        border: 0.03rem solid #aaaab3;
        margin-right: 0.31rem;
      }
      .tag:last-child {
        margin-right: 0;
      }
    }
  }
  .storeListBox_r {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 0.5rem;
    .iconfontBox {
      width: 1.5rem;
      height: 1.5rem;
      background: #f5f5f5;
      border-radius: 0.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 0.5rem;
      .icon-zx_map_local {
        font-size: 0.8rem;
      }
    }
    .address_txt {
      font-size: 0.75rem;
      color: #3b3b4a;
    }
  }
}
.payList {
  margin: 1rem 0.625rem;
  padding: 1rem 0.75rem;
  background: #fff;
  border-radius: 0.63rem;
  display: flex;
  flex-direction: column;
  .cellGroup {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    .cellGroup_l {
      flex: 1;
      text-align: left;
    }
  }

  .btnBox {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
    .btn {
      width: 3.25rem;
      height: 1.5rem;
      border-radius: 0.8rem;
      background: red;
      color: #fff;
      line-height: 1.5rem;
    }
  }
}
.oil_station {
  margin: 1rem 0.625rem;
  padding: 1rem 0.75rem 0.5rem 0.75rem;
  background: #fff;
  border-radius: 0.63rem;
  display: flex;
  justify-content: space-between;
  .oil_station_l {
    box-sizing: border-box;
    text-align: left;
    margin-right: 1rem;
  }
  .oil_station_r {
    text-align: right;
    color: #aaaab3;
    .icon-icon_more1 {
      font-size: 0.7rem;
      margin-left: 0.3rem;
      color: #999999;
    }
    .oil_station_r_num {
      padding: 0.32rem 0.625rem;
      box-sizing: border-box;
      border-radius: 0.6rem;
      margin-right: 0.3rem;
      margin-bottom: 0.5rem;
      background: #f5f5f5;
    }
    .active {
      // color: #fff;
      // background: #f15353;
      // border: 1px solid #f15353;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    }
    .active_gun {
      color: #fff;
      background: #f15353;
      border: 1px solid #f15353;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    }
  }
}
.addressCell {
  margin-bottom: 0.63rem;
  height: 3.13rem;
  border-radius: 0.63rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  box-sizing: border-box;
  .addressCell_l {
    align-items: center;
    flex: 1;
    overflow: hidden;
    .txt {
      margin-left: 0.28rem;
      overflow: hidden;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .addressCell_r {
    align-items: center;
    flex-shrink: 0;
  }
}
.moreTxt {
  margin: 0.625rem 0;
  text-align: center;
  color: #999;
}
.storeList {
  padding: 0.84rem 0.75rem;
  box-sizing: border-box;
  background: #fff;
  height: 60vh;
  overflow-y: scroll;
  .lis {
    padding: 0.94rem 0.75rem;
    box-sizing: border-box;
    border-radius: 0.5rem;
    border: 0.03rem solid #d6d6dc;
    margin-bottom: 0.63rem;
    .lis_b {
      display: flex;
      align-items: center;
      color: #6e6e79;
      margin-top: 0.59rem;
      .icon-dizhi1 {
        font-size: 0.75rem;
        margin-right: 0.2rem;
      }
      .loc {
        font-size: 0.75rem;
      }
    }
    .lisTop {
      display: flex;
      align-items: center;
      .tag {
        font-size: 0.75rem;
        color: #f15353;
        padding: 0.16rem 0.25rem;
        border: 0.03rem solid #f15353;
        background: #ffffff;
        border-radius: 0.25rem;
        line-height: 0.9rem;
        margin-right: 0.31rem;
      }
      .memberimg {
        width: 1.25rem;
        height: 1.25rem;
        background: #d6d6dc;
        border-radius: 50%;
        margin-right: 0.25rem;
        flex-shrink: 0;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .storeName {
        text-align: left;
        flex: 1;
        font-size: 1rem;
        color: #00001c;
        font-weight: 500;
      }
    }
  }
  .selectLis {
    border: 0.03rem solid #f15353;
    position: relative;
  }
  .br_record {
    position: absolute;
    bottom: 0;
    right: 0;
    .icon-record_go {
      color: #f15353;
    }
  }
}
.oil_station_r_num_md {
  // background: #f15353 !important;
  // color: #fff;
}
.oil_station_list {
  display: flex;
  flex-direction: column;
  .lis {
    height: 3.5rem;
    line-height: 3.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0.75rem;
    border-bottom: 1px solid #ececec;
  }
  .lis:last-child {
    border-bottom: 0;
  }
}
.oilTag {
  padding: 0.3rem 0.5rem;
  border: 1px solid #999;
  color: #999;
  border-radius: 0.25rem;
  margin-right: 0.5rem;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
}
</style>
